<template>
	<view class="content">
		<u-swiper :list="list" height="400"></u-swiper>
		
		<view class="wrap">
			<view class="bg">
				<view class="bg-img1 bg-img" @click="goToTab(`/pages/work/index`)">
					<view class="bg-text">我要预约</view>
					<view class="bg-text-sub">跳转至预约服务页面</view>
				</view>
				<view class="bg-img2 bg-img" @click="goToUrl(`/pages/mine/history?title=当前预约&text=预约`)">
					<view class="bg-text">当前预约</view>
					<view class="bg-text-sub">显示当前您的预约列表</view>
				</view>
			</view>
			<!-- <view class="bg">
				<view class="bg-img1 bg-img" @click="goToTab(`/pages/work/index`)">
					<view class="bg-text1">东莞市道路运输事务中心业务管理平台</view>
					<view class="bg-text-sub1">交通局下发文件，登录下载文件交通局下发文件，登录下载文件交通局下发文件，登录下载文件</view>
				</view>
			</view> -->
			
			<view class="bg-notice">
				<u-section title="最新公告" line-color="#0079FE" sub-title="查看更多" @click="goToUrl(`/pages/home/notice`)"></u-section>
				<view class="notice">
					<view class="left" @click="goToUrl(`/pages/home/notice`)"></view>
					<view class="right">
						<view class="right-content" v-for="item in list" :key="item.title" @click="goToUrl(`/pages/home/parse`)">
							<image :src="item.image"></image>
							<text>{{ item.title }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loadStatus: 'loadmore',
				flowList: [],
				scrollTop: 0,
				noticeList: ['最新公告：为进一步加强和完善公司美发室的管理，提高服务质量，特制订本办法。',],
				list: [
					{
						title: '东莞移动美发室管理办法',
						text: '为进一步加强和完善公司美发室的管理，提高服务质量，特制订本办法。',
						date: '2018年9月',
						image: '../static/images/appointment/nav1.webp',
					},
					{
						title: '东莞移动美发室管理办法',
						text: '为进一步加强和完善公司美发室的管理，提高服务质量，特制订本办法。',
						date: '2018年9月',
						image: '../static/images/appointment/nav2.webp',
					},
					{
						title: '东莞移动美发室管理办法',
						text: '为进一步加强和完善公司美发室的管理，提高服务质量，特制订本办法。',
						date: '2018年9月',
						image: '../static/images/appointment/nav1.webp',
					},
					{
						title: '东莞移动美发室管理办法',
						text: '为进一步加强和完善公司美发室的管理，提高服务质量，特制订本办法。',
						date: '2018年9月',
						image: '../static/images/appointment/nav2.webp',
					},
				]
			}
		},
		methods: {
			/**
			 * 页面跳转
			 */
			goToUrl(url) {
				this.$tab.navigateTo(url)
			},
			/**
			 * 导航页面跳转
			 */
			goToTab(url) {
				uni.switchTab({
					url: url
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	.wrap {
		margin: 20rpx;
		.bg{
			display: flex;
			text-align: center;
			.bg-img {
				flex: 1;
				height: 180rpx;
				color: #333333;
				box-shadow: 0 0 5px 1px #ccc;
				border-radius: 16rpx;
				background-position: center !important;
				background-size: cover !important;
				.bg-text {
					font-family: 'Montserrat';
					color: #fff; 
					margin-top: 30rpx;
					font-size: 30px; 
					font-weight: bold;
					text-shadow:
						1px 1px 0 #bbb, /* 左上阴影 */
						-1px -1px 0 #bbb, /* 右下阴影 */
						1px -1px 0 #bbb, /* 左下阴影 */
						-1px 1px 0 #bbb; /* 右上阴影 */
				}
				.bg-text-sub {
					margin-top: 10rpx;
					color: #fff;
				}
				.bg-text1 {
					font-family: 'Montserrat';
					color: #fff; 
					margin-top: 30rpx;
					font-size: 20px; 
					font-weight: bold;
					text-shadow:
						1px 1px 0 #bbb, /* 左上阴影 */
						-1px -1px 0 #bbb, /* 右下阴影 */
						1px -1px 0 #bbb, /* 左下阴影 */
						-1px 1px 0 #bbb; /* 右上阴影 */
				}
				.bg-text-sub1 {
					margin: 10rpx 20px 0 20px;
					color: #fff;
					font-size: 12px; 
				}
			}
			.bg-img1 {
				margin-right: 12rpx;
				background-color: #3C96F3;
				background-image: url('../static/images/appointment/date.webp') !important;
			}
			.bg-img2 {
				margin-left: 12rpx;
				background-color: #7C95F7;
				background-image: url('../static/images/appointment/bg.webp') !important;
			}
		}
		.u-section {
			margin-top: 40rpx;
		}
		.bg-notice {
			background-color: #fff;
			position: relative;
			top: -15rpx;
			.u-section {
				padding: 20rpx 20rpx 0 20rpx;
			}
			.notice {
				display: flex;
				margin: 20rpx 0;
				border-top: 2rpx solid #EAECEF;
				.left {
					flex: 1;
					height: 623rpx;
					background-position: center !important;
					background-size: cover !important;
					background-image: url('../static/images/appointment/notice.png') !important;
				}
				.right {
					flex: 1;
					position: relative;
					top: 13rpx;
					.right-content {
						padding: 20rpx;
						background-color: #fff;
						border-bottom: 2rpx solid #EAECEF;
						image {
							width: 100rpx;
							height: 100rpx;
						}
						text {
							display: inline-block;
							width: 200rpx;
							line-height: 40rpx;
							white-space: wrap;
							font-size: 24rpx;
							color: #999999;
							position: relative;
							bottom: 20rpx;
							left: 20rpx;
						}
					}
				}
			}
		}
	}
</style>